<!--
*- coding = utf-8 -*-
#@Time : 2022/10/13 15:55
#@Author : CSDN 沉默小管
#@File : useClass.ts
#@web  : golangblog.blog.csdn.net
#@Software: WebStorm
-->
<template>
    <div class="custom-video" v-bind="attrs">
        <div
                class="custom-video-container"
                ref="videoRef"
                @mouseover="handleControls($event, 'start')"
                @mouseleave="handleControls($event, 'end')"
        >
            <template  v-if="videoState.play" >
                <div class="u-f u-f-ac u-f-ajc" @click="pause('btn')" style="position: absolute;height:100%;width: 100%;z-index:99">
                  <template v-if="videoState.isLoading">
                    <Loading style="height:50px;width: 100%;" :themeColor="videoConfig.themeColor" :isLoading="loading"/>
                  </template>
                </div>
            </template>
            <template v-else>
                <div class="u-f u-f-ac u-f-ajc" @click="play('btn')" style="position: absolute;height:100%;width: 100%;z-index:99">
                    <SvgIcon v-if="!videoState.play"
                             :style="'color:'+videoConfig.themeColor+';height:70px;width: 70px;'"
                             :size="70"
                             @click="play('btn')"  :iconClass="'bofang'" />
                </div>
            </template>
            <video
                    class="custom-video-video"
                    ref="videoDomRef"
                    :poster="videoConfig.poster"
            >
                <source :src="videoConfig.src" type="video/mp4">
                <p>设备不支持</p>
            </video>
            <!-- 控制区域背景 -->
            <transition name="slide-fade">
                <div
                        class="custom-video-control"
                        v-show="!videoState.hideControl || videoState.play"
                >
                    <!-- 进度条 -->
                    <div
                            class="custom-video-control-bg"
                            @mousedown="handleProgressDown"
                            @mousemove="handleProgressMove"
                            @mouseup="handleProgressUp"
                    >
                        <div
                                class="custom-video-control-bg-outside"
                                ref="videoProOutRef"
                        >
                            <span
                                    class="custom-video-control-bg-inside-cache"
                                    ref="videoCacheRef"
                            ></span>
                            <span
                                    class="custom-video-control-bg-inside"
                                    ref="videoProRef"
                            ></span>
                            <span
                                    class="custom-video-control-bg-inside-point"
                                    ref="videoPoiRef"
                            ></span>
                        </div>
                    </div>
                    <!-- 其他-->
                    <div class="u-f u-f-ajs custom-video-control-all">
                        <div style="display: flex;width:100%;">
                            <!-- 播放控制器-->
                            <div class="custom-video-control-control u-f u-f-ac u-f-ajc">
                                <SvgIcon v-if="videoState.play"
                                         :size="24"
                                         class="custom-video-control-control-play custom-video-control-control-pause"
                                         @click="pause('btn')" :style="'color:'+videoConfig.themeColor" :iconClass="'zanting'" />
                                <SvgIcon v-else
                                         :size="24"
                                         class="custom-video-control-control-play"
                                         @click="play('btn')"  :style="'color:'+videoConfig.themeColor" :iconClass="'bofang'" />
                            </div>
                            <!-- 声音 -->

                            <div
                                    class="custom-video-control-voice u-f u-f-ac u-f-ajc margin-right-5"
                                    @mousemove="handleVolProgressMove"
                            >
                                <SvgIcon :size="20" @click="handleClickVoice" @mouseleave="handleMouseLeaveControlVoice('custom-video-control-voice-bg')" @mousemove="handleMouseEnterControlVoice('custom-video-control-voice-bg')" :style="'color:'+videoConfig.themeColor" class="custom-video-control-voice-play" :iconClass="'laba'" />
                                <div
                                        class="custom-video-control-voice-bg display-hide-style"
                                        ref="custom-video-control-voice-bg"
                                        @mouseleave="handleMouseLeaveControlVoice('custom-video-control-voice-bg')" @mousemove="handleMouseEnterControlVoice('custom-video-control-voice-bg')"
                                >
                                    <div class="custom-video-control-voice-bg-number">{{videoConfig.volume}}</div>
                                    <div
                                            class="custom-video-control-voice-bg-outside"
                                            ref="voiceProOutRef"
                                            @mousedown="handleVolProgressDown"
                                            @mouseup="handleVolProgressUp"
                                    >
                                        <span class="custom-video-control-voice-bg-inside" ref="voiceProRef"></span>
                                        <span class="custom-video-control-voice-bg-point" ref="voicePoiRef"></span>
                                    </div>
                                </div>
                                <div @click="handleClickVoice" style="position: absolute;height: 35px;width: 18px;bottom: 0px;left: 0px;"></div>
                            </div>

                            <!-- 时间 -->
                            <div
                                    class="custom-video-control-time u-f u-f-ac u-f-ajc margin-right-5"
                            >
                                <span style="user-select:none;">{{currentTime ? currentTime : "00:00"}}</span>
                                /
                                <span style="user-select:none;">{{duration ? duration : "00:00"}}</span>
                            </div>
                        </div>
                        <!-- 全屏缩放 -->
                        <div
                                class="custom-video-control-full u-f"
                        >
                            <div class="margin-right-10 u-f u-f-ac u-f-ajc">
                                <SvgIcon
                                        :size="18"
                                        @mouseleave="handleMouseLeaveControlVoice('halfScreen-style')" @mousemove="handleMouseEnterControlVoice('halfScreen-style')"
                                        :style="'color:'+videoConfig.themeColor"
                                        class="custom-video-control-full-icon"
                                        @click="handleHalfScreen" :iconClass="videoState.isHalfScreen?'suoxiaotuichuquanpingshouhui':'quanping1'" />
                                <div class="halfScreen-style display-hide-style">
                                    宽屏模式
                                </div>
                                <div @click="handleClickVoice" style="z-index:-1;position: absolute;height: 35px;width: 18px;bottom: 0px;left: 0px;"></div>

                            </div>
                            <div class="u-f u-f-ac u-f-ajc">
                                <SvgIcon
                                        :size="18"
                                        @mouseleave="handleMouseLeaveControlVoice('fullScreen-style')" @mousemove="handleMouseEnterControlVoice('fullScreen-style')"
                                        :style="'color:'+videoConfig.themeColor"
                                        class="custom-video-control-full-icon"
                                        @click="handleScreen" :iconClass="videoState.isFullScreen?'tuichuquanping':'quanping2'" />
                                <div class="fullScreen-style display-hide-style">
                                    全屏模式
                                </div>
                                <div @click="handleClickVoice" style="z-index:-1;position: absolute;height: 35px;width: 100%;bottom: 0px;left: 0px;"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script setup lang="ts">

import {ref, useAttrs} from "vue";
import {useFunc} from "./hooks/useFunc";
import SvgIcon from "./cpns/svgIcon"
import Loading from "./cpns/loading"


interface propsInterface{
    src:string
    poster:string
    volume?:number
    themeColor?:string
    activeColor?:string
    width?:string
    height?:string
}
let props = withDefaults(defineProps<propsInterface>(), {
    src:"",
    poster:"",
    volume:20,
    themeColor:"",
    activeColor:"",
    width:"",
    height:"",
})
const attrs = useAttrs();
let loading = ref(true)
let {videoConfig,videoState,videoRef,videoDomRef,videoProOutRef,videoCacheRef,videoProRef,videoPoiRef,duration,currentTime,voiceProOutRef,voiceProRef,voicePoiRef,
  handleHalfScreen,handleMouseEnterControlVoice,handleMouseLeaveControlVoice,
  handleProgressDown,play,pause,handleProgressMove,handleProgressUp,handleVolProgressDown,handleVolProgressMove,handleClickVoice,
  handleVolProgressUp,handleControls,handleScreen} = useFunc(props)
</script>

<style scoped lang="less">
/* 总容器 */
.custom-video{
  &-container{
    cursor:pointer;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  /* 视频标签 */
  &-video{
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  /* 控制栏 */
  &-control{
    position: absolute;
    width: 100%;
    height: 50px;
    left: 0;
    bottom: 0;
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
      z-index:999;
    margin-top: 20px;
      /* 暂停 或者 播放 */
      &-control-pause{
          display: none;
      }
      &-control-play{
          width: 24px!important;
          height: 24px!important;
      }
      /**声音 时间 全屏控件**/
      &-voice,
      &-time,
      &-full{
          width: auto;
          color: #fff;
          position: relative;
      }
      &-time{
          font-size: 12px;
      }
      &-full{
          cursor: pointer;
          font-size: 14px;
          width:50px;
          &-icon{
              width: 18px!important;
              height: 18px!important;
              font-size: 14px;
          }
      }
      &-voice{
        cursor: pointer;
        font-size: 14px;
        width: 30px;
        height: 30px;
      }
  }
  /* 控制栏进度条 */
  &-control-bg{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    /* 控制栏进度条 —— 总长度 */
    &-outside{
      width: 100%;
      height: 5px;
      background-color:hsla(0,0%,100%,.2);
      position: relative;
      cursor: pointer;
    }
    /* 控制栏进度条 —— 播放长度 */
    &-inside{
      z-index: 3;
      position: absolute;
      display: inline-block;
      width: 0;
      height: 100%;
      border-radius: 2.5px;
      left: 0;
      top: 0;
      background-color: #fff;
      transition: all 0.2s;
    }
    /* 控制栏进度条 —— 播放点 */
    &-inside-point{
      z-index: 3;
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      top: -2.5px;
      left: -1%;
      transition: all 0.2s;
    }
    &-inside-cache{
      z-index: 2;
      position: absolute;
      display: inline-block;
      width: 0;
      height: 100%;
      border-radius: 2.5px;
      left: 0;
      top: 0;
      background-color: #abadb2;
      transition: all 0.2s;
    }
  }

  /* 控制栏 —— 播放暂停控件 声音、时间、全屏缩放 */
  &-control-all{
    padding:8px 10px;
  }
  &-control-control{
    color:white;
    width:35px;
  }
}

//声音样式
.custom-video-control-voice{
  //&:hover > &-bg{
  //  display: block;
  //}
  &-play{
    z-index: 10;
    width: 20px!important;
    height: 20px!important;
  }
  &-bg{
    position: absolute;
    width: 30px;
    height: 100px;
    background-color: rgba(0, 0, 0, .55);
    left: 0;
    bottom: 45px;
    &-number{
      font-size:12px;
      width:100%;
      user-select: none;
    }
    &-outside{
      width: 5px;
      height: 70px;
      border-radius: 2.5px;
      background-color: #aaa;
      position: absolute;
      left: 50%;
      bottom: 15px;
      transform: translate3d(-50%, 10%, 0);
      cursor: pointer;
    }
    &-inside{
      display: inline-block;
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      border-radius: 2.5px;
      background-color: #fff;
      height: 0;
    }
    &-point{
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      left: -2.5px;
      bottom: -1px;
    }
  }
}

//
.halfScreen-style{
  font-size: 12px;
  position: absolute;
  width: auto;
  height: 100%;
  padding: 0px 5px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.55);
  left: -15px;
  bottom: 45px;
}
//
.fullScreen-style{
  font-size: 12px;
  position: absolute;
  width: auto;
  height: 100%;
  padding: 0px 5px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.55);
  left: -8px;
  bottom: 45px;
}


/* 控制栏隐藏动画 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

/**控件过度动画**/
.control-fade-enter-active {
  transition: all 0.3s ease-out;
}

.control-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.control-fade-enter-from,
.control-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
.show{
  opacity: 1!important;
}
.hide{
  opacity: 0!important;
}
.display-hide-style{
  display: none;
}
.display-show-style{
  display: block;
}
</style>
